import React, { Component } from 'react';
import { Table, Tabs, Icon, Input, Button} from 'antd';

const TabPane = Tabs.TabPane;

const styles = {
  inputClassify: {
    width: '50%',
    marginTop: '1%',
    marginLeft: '1%'
  },
  button: {
    width: '10%',
    marginLeft: '1%'
  }
}

const tabContent = [
  <span><Icon type="book" />分类列表</span>,
  <span><Icon type="edit" />新建分类</span>
];

const columns = [{
  title: '分类编号',
  dataIndex: 'id',
  key: 'id',
}, {
  title: '知识点分类',
  dataIndex: 'name',
  key: 'name',
}, {
  title: '知识点数量',
  dataIndex: 'number',
  key: 'number',
}, {
  title: '操作',
  key: 'operation',
  render(text, record) {
    return (
      <span>
        <a href="#">修改</a> |&nbsp;
        <a href="#">删除</a>
      </span>
    );
  }
}];

const data = [{
  key: '1',
  id: '1',
  name: 'pyhton',
  number: 10
}, {
  key: '2',
  id: '2',
  name: 'react',
  number: 12
}, {
  key: '3',
  id: '3',
  name: 'vue',
  number: 41
}, {
  key: '4',
  id: '4',
  name: 'android',
  number: 9
}];

class Classify extends Component {
  constructor(props){
    super(props);
    this.state = {
      classify: ''
    }
  }

  submit = () => {
    console.log(this.state.classify)
  }
  

  render(){
    return(
      <Tabs defaultActiveKey="1">
        <TabPane tab={tabContent[0]} key="1">
          <Table columns={columns} dataSource={data} />
        </TabPane>
        <TabPane tab={tabContent[1]} key="2">
          <Input 
            id="defaultInput"
            placeholder="分类名称*"
            onChange={ e => this.setState({ classify: e.target.value })}
            style={styles.inputClassify}/>
          <Button 
            type="primary"
            style={styles.button}
            onClick={this.submit}
            disabled={this.state.classify === ''}
            >添加</Button>
        </TabPane>
      </Tabs>
    )
  }
}

export default Classify;